
<template>
    <div class="system-roleAdmin-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">




            <div class="table-search-container">
                <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px" class="table-form">
                    <el-row>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="角色编码">
                                <el-input v-model="state.ruleForm.roleCode" style="width: 100%"
                                    placeholder="角色编码，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="角色名称">
                                <el-input v-model="state.ruleForm.roleName" style="width: 100%"
                                    placeholder="角色名称，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>



                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="状态">

                                <el-select v-model="state.ruleForm.status" placeholder="状态查询" clearable class="input-width"
                                    style="width: 100%">
                                    <el-option v-for="item in state.statusList" :key="item.dicItemValue"
                                        :label="item.dicItemName" :value="item.dicItemValue"></el-option>
                                </el-select>


                            </el-form-item>
                        </el-col>









                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                    <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                    <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                </div>
                                <div>
                                    <el-button size="default" type="primary" @click="refresh()">查询
                                    </el-button>
                                    <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>




            <el-card shadow="hover" class="layout-padding-auto">





                <div class="bar_tools">
                    <el-button-group class="ml-4">
                        <el-button type="primary" size="default" @click="handleAdd">添加角色</el-button>
                    </el-button-group>
                </div>


                <el-table size="default" :data="state.tableData" style="width: 100%">
                    <el-table-column label="角色ID" prop="roleId" width="120"></el-table-column>
                    <el-table-column label="角色编码" prop="roleCode" width="200"></el-table-column>
                    <el-table-column label="角色名称" prop="roleName" width="240"></el-table-column>
                    <el-table-column label="创建人" prop="createBy" width="120"></el-table-column>

                    <el-table-column label="创建日期" prop="createDate">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createDate), "YYYY-mm-dd HH:MM:SS")
                            }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="更新人" prop="updateBy" width="120"></el-table-column>
                    <el-table-column label="更新日期" prop="updateDate"></el-table-column>
                    <el-table-column prop="status" label="状态" width="140">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">{{
                                getStatus(scope.row.status)
                            }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="250">
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="primary" size="default"
                                    @click="handlerEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="primary" size="default"
                                    @click="handlerEdit2(scope.$index, scope.row)">配置数据权限</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>


                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.ruleForm.page" background
                v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="state.ruleForm.total">
            </el-pagination>
        </el-card>


        <editdialog ref="editdialogRef" @refresh="refresh" />

        <userDataDimensionEditDialog ref="userDataDimensionEditDialogRef" />

    </div>
</template>

<script setup lang="ts" name="roleAdmin">

import { formatDate } from './../../../utils/formatTime';
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
// 导入接口
import { useSysApi } from "../../../api/sys";


const userDataDimensionEditDialog = defineAsyncComponent(() => import('./userDataDimensionEdit.vue'));
const userDataDimensionEditDialogRef = ref();

const editdialog = defineAsyncComponent(() => import('./editdialog.vue'));
const editdialogRef = ref();



const state = reactive({
    isToggle: false,
    tableData: [],
    statusList: [] as any,
    ruleForm: {
        page: 1,
        limit: 10,
        total: 0,
        roleName: "",
        roleCode: "",
        status: ""
    },
});






const handleResetSearch = () => {
    state.ruleForm = {
        page: 1,
        limit: 10,
        total: 0,
        roleName: "",
        roleCode: "",
        status: ""
    };
    queryDynamicSqlPaged();
}


const refresh = () => {
    queryDynamicSqlPaged();
}


const handleAdd = () => {
    editdialogRef.value.openDialog("add");
}

// 分页改变
const onHandleSizeChange = (val: number) => {
    state.ruleForm.limit = val;
    queryDynamicSqlPaged();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.ruleForm.page = val;
    queryDynamicSqlPaged();
};

const handlerEdit = (index: any, row: any) => {
    editdialogRef.value.openDialog("edit", row);
}


const handlerEdit2 = (index: any, row: any) => {
    userDataDimensionEditDialogRef.value.openDialog(row);
}



const queryDynamicSqlPaged = async () => {
    try {
        let vo = {
            params: {} as any,
            sorts: "role_id asc"
        };
        if (state.ruleForm.roleName) vo["params"]["roleName"] = state.ruleForm.roleName;
        if (state.ruleForm.roleCode) vo["params"]["roleCode"] = state.ruleForm.roleCode;
        if (state.ruleForm.status) vo["params"]["status"] = state.ruleForm.status;
        let listTemp = await useSysApi().queryDynamicSqlPaged(
            "fca0c2236325f81017b12e4da4d32990",
            state.ruleForm.page,
            state.ruleForm.limit,
            vo
        );
        state.ruleForm.total = listTemp.total;
        state.tableData = listTemp.list;
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}

const selectDicItemsByDicCode = async () => {
    state.statusList = await useSysApi().selectDicItemsByDicCode("commStatus", "General");
}


const getStatus = (str: string) => {
    let strTemp = "";
    state.statusList.forEach((element: any) => {
        if (element.dicItemValue == str) {
            strTemp = element.dicItemName;
        }
    });
    return strTemp;
}



// 页面加载时
onMounted(() => {
    selectDicItemsByDicCode();
    // 获取字典状态编码
    queryDynamicSqlPaged();
});




</script>




<style scoped lang="scss">
// .el-form .el-form-item:last-of-type {
//     margin-bottom: 22px !important;
// }

.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}


.system-roleAdmin-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}

.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
